<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-form-item label="品牌名称：">
            <el-input v-model="filters.name" clearable placeholder="品牌名称"></el-input>
          </el-form-item>
          <el-form-item label="商家名称：">
            <el-input v-model="filters.merchantName" clearable placeholder="商家名称"></el-input>
          </el-form-item>
          <el-form-item label="审核状态：">
            <el-select v-model="filters.status" clearable placeholder="审核状态">
              <el-option
                v-for="item in checkOption"
                :key="item.status"
                :label="item.label"
                :value="item.status"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请时间：">
            <el-date-picker
              v-model="createTime"
              type="datetimerange"
              value-format="yyyy-MM-dd hh:mm:ss"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="申请开始时间"
              end-placeholder="申请结束时间"
              align="right"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <!-- 查询  重置 -->
        <el-row class="search-button">
          <el-form-item>
          <kt-button
            icon="fa fa-search"
            :label="$t('action.search')"
            type="primary"
            @click="findPage(null)"
          />
        </el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-refresh"
            :label="$t('action.reset')"
            type="primary"
            @click="resetForm('filters')"
          />
        </el-form-item>
        <!--批量审核-->
        <el-form-item>
          <kt-button
            :label="$t('action.batchReview')"
            :size="size"
            type="primary"
            @click="handleBatchReviewFunction()"
            :disabled="this.multipleSelection.length===0"
            style="float:left;"
          />
        </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!--表格内容栏-->
    <el-table
      :data="pageResult"
      :size="size"
      align="align"
      style="width: 100%"
      :max-height="450"
      :stripe="true"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
    >
      <el-table-column type="selection" :selectable="selectTable" align="center" width="55"></el-table-column>
      <el-table-column prop="merchantName" label="商家名称" sortable></el-table-column>
      <el-table-column prop="merchantCode" label="商家编码" sortable></el-table-column>
      <el-table-column prop="name" label="品牌名称" sortable></el-table-column>
      <el-table-column prop="alias" label="品牌别名" sortable></el-table-column>
      <el-table-column prop="createTime" label="申请时间" sortable></el-table-column>
      <el-table-column prop="status" label="审核状态" sortable :formatter="formatStatus"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <kt-button
            icon="fa fa-search"
            :label="$t('action.lookInfo')"
            :size="size"
            type="success"
            v-if="scope.row.status != 1"
            @click="handleDetailFunction(scope)"
          />
          <kt-button
            icon="el-icon-view"
            :label="$t('action.check')"
            :size="size"
            type="danger"
            v-if="scope.row.status == 1"
            @click="handleCustom(scope.row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        @size-change="handleSizeChange"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"
      ></el-pagination>
    </div>
    <!-- 审核弹窗内容 -->
    <el-dialog
      title="审核弹窗"
      width="40%"
      :visible.sync="checkDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :inline="true" :size="size">
        <el-form-item label="审核状态:">
          <el-select v-model="dataForm.status" placeholder="审核状态">
            <el-option
              v-for="item in merchantCheckData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="checkDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
    <!--资质弹窗界面-->
    <el-dialog
      title="商家品牌资质管理"
      top="2vh"
      width="70%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="6">申请品牌：{{editDialogValue.name}}</el-col>
        <el-col :span="6">别名：{{editDialogValue.alias}}</el-col>
        <el-col :span="6">审核状态：{{editDialogValue.status}}</el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="6">商家名称：{{editDialogValue.merchantName}}</el-col>
        <el-col :span="6">商家编码：{{editDialogValue.merchantCode}}</el-col>
        <el-col :span="6">申请时间：{{editDialogValue.createTime}}</el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="2">资质证书1</el-col>
      </el-row>
      <div style="margin-top: 20px; border-bottom: 1px dashed #c3c3c3"></div>
      <el-row style="margin-top: 20px">
        <el-col :span="5">资质名称：{{editDialogValue.seniorityName}}</el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;资质到期日：{{editDialogValue.validityEnd}}</el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :span="4">&nbsp;&nbsp;&nbsp;&nbsp;资质图片：</el-col>
        <el-col :span="6" align="left">
          <img :src="editDialogValue.seniorityurl" class="image">
        </el-col>
        <el-col :span="6" align="left">
          <img :src="editDialogValue.seniorityurl2" class="image">
        </el-col>
        <el-col :span="6" align="left">
          <img :src="editDialogValue.seniorityurl3" class="image">
        </el-col>
      </el-row>
      <div v-if="editDialogValue.seniorityName2 != ''">
        <el-row style="margin-top: 20px;">
          <el-col :span="2">资质证书2</el-col>
        </el-row>
        <div style="margin-top: 20px; border-bottom: 1px dashed #c3c3c3"></div>
        <el-row style="margin-top: 20px">
          <el-col :span="5">资质名称：{{editDialogValue.seniorityName2}}</el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="6">资质到期日： {{editDialogValue.validityEnd2}}</el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="4">&nbsp;&nbsp;&nbsp;&nbsp;资质图片：</el-col>
          <el-col :span="6" align="left">
            <img :src="editDialogValue.seniorityurl4" class="image">
          </el-col>
          <el-col :span="6" align="left">
            <img :src="editDialogValue.seniorityurl5" class="image">
          </el-col>
          <el-col :span="6" align="left">
            <img :src="editDialogValue.seniorityurl6" class="image">
          </el-col>
        </el-row>
      </div>
      <div v-if="editDialogValue.seniorityName3 != ''">
        <el-row style="margin-top: 20px;">
          <el-col :span="2">资质证书3</el-col>
        </el-row>
        <div style="margin-top: 20px; border-bottom: 1px dashed #c3c3c3"></div>
        <el-row style="margin-top: 20px">
          <el-col :span="5">资质名称：{{editDialogValue.seniorityName3}}</el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="6">资质到期日：{{editDialogValue.validityEnd3}}</el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="4">&nbsp;&nbsp;&nbsp;&nbsp;资质图片：</el-col>
          <el-col :span="6" align="left">
            <img :src="editDialogValue.seniorityurl7" class="image">
          </el-col>
          <el-col :span="6" align="left">
            <img :src="editDialogValue.seniorityurl8" class="image">
          </el-col>
          <el-col :span="6" align="left">
            <img :src="editDialogValue.seniorityurl9" class="image">
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
export default {
  components: {
    KtButton
  },
  data() {
    return {
      size: "small",
      multipleSelection: [], // 列表选中列
      createTime: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      merchantCheckData: [
        {
          value: "2",
          label: "审核通过"
        },
        {
          value: "3",
          label: "审核拒绝"
        }
      ],
      filters: {
        name: "",
        merchantName: "",
        startTime: undefined,
        endTime: undefined,
        status: null
      },
      checkOption: [
        {
          status: null,
          label: "全部"
        },
        {
          status: 1,
          label: "待审核"
        },
        {
          status: 2,
          label: "审核通过"
        },
        {
          status: 3,
          label: "审核拒绝"
        }
      ], // 商家审核状态下拉框 1待审核、2审核通过、3审核拒绝
      editDialogValue: {
        name: "",
        alias: "",
        createTime: "",
        merchantName: "",
        merchantCode: "",
        status: "",
        seniorityName: "",
        seniorityName2: "",
        seniorityName3: "",
        seniorityurl: "",
        seniorityurl2: "",
        seniorityurl3: "",
        seniorityurl4: "",
        seniorityurl5: "",
        seniorityurl6: "",
        seniorityurl7: "",
        seniorityurl8: "",
        seniorityurl9: "",
        validityEnd: "",
        validityEnd2: "",
        validityEnd3: ""
      },
      dataForm: {
        id: "",
        ids: "",
        status: "2"
      },
      pageResult: [],
      totalSize: 0,
      pageRequest: { pageNum: 1, pageSize: 10 },
      editDialogVisible: false, // 新增编辑界面是否显示
      checkDialogVisible: false // 是否显示审核弹窗
    };
  },
  created() {
    this.$nextTick(() => {
      this.findPage();
    });
  },
  methods: {
    // 清空文本值
    resetForm() {
      this.filters.name = "";
      this.filters.merchantName = "";
      this.filters.merchantCode = "";
      this.filters.startTime = undefined;
      this.filters.endTime = undefined;
      this.filters.status = "";
      this.createTime = "";
      this.findPage(null);
    },

    // 1待审核、2审核通过、3审核不通过
    formatStatus(row, column, prop) {
      if (prop == 1) {
        return "待审核";
      } else if (prop == 2) {
        return "审核通过";
      } else {
        return "审核拒绝";
      }
    },
    selectTable(row, index) {
      if (row.status == 1) {
        return true;
      } else {
        return false;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 获取分页数据
    findPage: function(params) {
      let this_ = this;
      if (params == undefined || params == null) {
        params = {
          pageNum: this_.pageRequest.pageNum,
          pageSize: this_.pageRequest.pageSize
        };
      }
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      if (this_.createTime != "" && this_.createTime != null) {
        this.filters.startTime = this_.createTime[0];
        this.filters.endTime = this_.createTime[1];
      }
      this_.filters.start = params.pageNum;
      this_.filters.limit = params.pageSize;
      this.utils.request.brandManagementApi(this_.filters, function(res) {
        this_.pageResult = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },

    // 每页数据刷新
    refreshPageRequest: function(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.findPage();
    },

    // 每页条数刷新
    handleSizeChange: function(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.findPage();
    },

    //详情
    handleDetailFunction(data) {
      let this_ = this;
      this.editDialogVisible = true;
      this_.editDialogValue = JSON.parse(JSON.stringify(data.row));
      if (data.row.status == 1) {
        this_.editDialogValue.status = "待审核";
      } else if (data.row.status == 2) {
        this_.editDialogValue.status = "审核通过";
      } else if(data.row.status == 3){
        this_.editDialogValue.status = "审核拒绝";
      }
    },

    // 批量审核
    handleBatchReviewFunction() {
      this.checkDialogVisible = true;
      let ids = this.multipleSelection.map(item => item.id).toString();
      this.dataForm.id = "";
      this.dataForm.ids = ids;
    },

    // 审核事件
    handleCustom(value) {
      this.checkDialogVisible = true;
      this.dataForm.id = value;
      this.dataForm.ids = "";
    },

    // 提交审核
    submitForm: function() {
      let this_ = this;
      let params = Object.assign({}, this.dataForm);
      this.utils.request.brandManagementUpdateApi(params, function(data) {
        this_.checkDialogVisible = false;
        if (data.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.findPage();
        } else {
          this_.$message({ message: "操作失败", type: "error" });
        }
      });
    }
  }
};
</script>

<style scoped lang='scss'>
.image {
  width: 50px;
}
</style>
